/*
  学习目标：使用prop-types完成props数据校验
*/

import React, { Component } from 'react';
//  1. 导入prop-types包
import PropTypes from 'prop-types';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child title={<h1>123</h1>} name={[]} zs={{}} />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return <div></div>;
  }
}

// 2. 给组件设置规则对象
// 💥 属性名propTypes固定写法
Child.propTypes = {
  // 3. 给具体的props属性,设置规则
  name: PropTypes.number.isRequired,

  // element 代表JSX类型

  title: PropTypes.element,
  // shape

  zs: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
};
